<template>
  <div class="register">
    <div class="main-title">
      <div class="back" @click="routerBack()">
        <i class="van-icon van-icon-arrow-left"></i>
      </div>
      Sign Up
    </div>
    <div class="register-body">
      <van-image width="100%" :src="registerInfo" />
    </div>
    <div class="register-form">
      <van-form>
        <van-cell-group>
          <div class="register-form-item">
            <van-field
              v-model="name"
              placeholder="Name Surname"
            />
            <!-- <input class="input" v-model="name" placeholder="Name Surname" /> -->
          </div>
          <div class="register-form-item">
            <!-- <input class="input" v-model="phone" placeholder="Please enter phone number" /> -->
            <van-field
              v-model="phone"
              label-width="3em"
              label="    "
              placeholder="Please enter phone number"
            />
          </div>
        </van-cell-group>
        <div class="register-form-tips">
          We need to verify you. We will send you a one time verification code.
        </div>
        <div class="register-form-btn">
          <van-button round block type="primary" @click="Next" class="btn btn-orange">Next</van-button>
        </div>
        <div class="register-form-tips">
          <center>Already have an account? <span @click="goLogin">Login</span></center>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import RegisterInfo from '../../assets/img/signup-guide-01.png'

const router = useRouter()
const registerInfo = RegisterInfo
const name = ref('')
const phone = ref('')

const routerBack = (() => {
  history.back()
})
const goLogin = (() => {
  router.push({
    name: 'Login'
  })
})
const Next = (() => {
  router.push({
    name: 'RegPassword',
    params: {
      name: name.value,
      phone: phone.value,
    }
  })
})
</script>
<style scoped>
.register {
  display: block;
}
.register-body {
  padding: 0 5vw;
}
.register-form {
  padding: 10px 5vw 0;
}
.register-form-item {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.register-form-item input {
  color: #AC8E71;
}
.register-form-tips {
  font-size: 1em;
  line-height: 20px;
  padding: 3px 0;
  color: #7F4E1D;
}
.register-form-tips span {
  color: #FF5E00;
}
.register-form-item ::-webkit-input-placeholder {
  color: #AC8E71;
}
.register-form-btn .btn{
  width: 100%;
  border: #FF5E00 1px solid;
  background: #FF5E00;
  color: #FFF;
  font-size: 1em;
  font-weight: bold;
  margin: 10px 0;
}
.van-field {
  border-radius: 5px;
  background: #F3F3F3;
}
.van-field .van-field__value {
  color:#AC8E71;
}
.van-field .van-field__value .van-field__body .van-field__control{
  color:#AC8E71;
}
:root {
  --van-text-color: #AC8E71 !important;
}
</style>
